<template>
  <div class="ratings" ref="ratings">
    <div class="ratings-wapper">
      <div class="rating-content">
        <div class="seller-info">
          <div class="left">
            <h1 class="score">{{seller.score}}</h1>
            <div class="title">综合评分</div>
            <div class="rank">高于周边商家{{seller.rankRate}}%</div>
          </div>
          <div class="right">
            <div class="food-score">
              <span class="title">美食评分</span>
              <div class="star-wapper">
                <star :size="36" :score="seller.foodScore"></star>
              </div>
              <span class="score">{{seller.foodScore}}</span>
            </div>
            <div class="service-score">
              <span class="title">服务态度</span>
              <div class="star-wapper">
                <star :size="36" :score="seller.serviceScore"></star>
              </div>
              <span class="score">{{seller.serviceScore}}</span>
            </div>
            <div class="delivery-time">
              <span class="title">送达时间</span>
              <span class="time">{{seller.deliveryTime}}分钟</span>
            </div>
          </div>
        </div>
        <port-split></port-split>
      </div>
      <rating-select @select="select" @toggleOnly="toggleOnly" :selectType="selectType" :onlyContent="onlyContent" :ratings="ratings"></rating-select>
      <div class="rating-list">
        <ul>
          <transition-group :duration="800" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
            <li v-show="needShow(rating.rateType, rating.text)" v-for="(rating,index) of ratings" :key="index" class="rating-item">
              <div class="img-wapper">
                <img class="img" width="28" height="28" :src="rating.avatar" alt="rating.text">
              </div>
              <div class="content">
                <div class="name">{{rating.username}}</div>
                <div class="star">
                  <div class="star-wapper">
                    <star :size="24" :score="rating.score"></star>
                  </div>
                  <span class="time" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
                </div>
                <p class="text">{{rating.text}}</p>
                <div class="up-down" v-show="rating.recommend && rating.recommend.length">
                  <span :class="{'icon-thumb_up': rating.rateType === 0, 'icon-thumb_down': rating.rateType === 1}"></span>
                  <span class="rem" v-for="rem of rating.recommend" :key="rem">{{rem}}</span>
                </div>
                <div class="rate-time">{{rating.rateTime | formatDate('yyyy-MM-dd hh:mm') }}</div>
              </div>
            </li>
          </transition-group>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import PortSplit from 'common/split/PortSplit'
import Star from 'common/star/Star'
import RatingSelect from 'common/ratingselect/RatingSelect'
import { formatDate } from '@/assets/js/tools'

const ALL = 2
// const POSITIVE = 1
// const NEGATIVE = 2

export default {
  name: 'SellRaitings',
  components: {
    Star,
    PortSplit,
    RatingSelect
  },
  props: {
    seller: {
      type: Object,
      default () {
        return {}
      }
    },
    ratings: {
      type: Array,
      default () {
        return []
      }
    },
    goods: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      selectType: ALL,
      onlyContent: false
    }
  },
  mounted () {
    this.initScroll()
  },
  methods: {
    initScroll () {
      if (!this.bscroll) {
        this.bscroll = new BScroll(this.$refs.ratings, {
          click: true
        })
      }
      this.selectType = ALL
      this.onlyContent = false
    },
    select (type) {
      this.selectType = type
    },
    toggleOnly () {
      this.onlyContent = !this.onlyContent
    },
    needShow (type, text) {
      if (this.onlyContent && !text) {
        return false
      }
      if (this.selectType === ALL) {
        return true
      } else {
        return type === this.selectType
      }
    }
  },
  filters: {
    formatDate (time, fmt) {
      let date = new Date(time)
      return formatDate(date, fmt)
    }
  }
}
</script>
<style lang="stylus" scoped>
.ratings
  position absolute
  top 3.54rem
  bottom 0
  width 100%
  overflow hidden
  z-index -1
  .rating-content
    .seller-info
      display flex
      .left
        flex 0 0 2.7rem
        width 2.7rem
        margin .36rem 0
        text-align center
        border-right .02rem solid rgba(7, 17, 27, 0.1)
        @media only screen and (max-width 320px)
          flex 0 0 2.3rem
          width 2.3rem
        .score
          margin-bottom .12rem
          font-size .48rem
          color rgb(255, 153, 0)
          line-height .56rem
        .title
          font-size .24rem
          color rgb(7, 17, 27)
          line-height .36rem
          margin-bottom .16rem
        .rank
          font-size .2rem
          line-height .2rem
          color rgb(147, 153, 159)
          margin-bottom .12rem
      .right
        flex 1
        margin .36rem .4rem
        padding-top .1rem
        font-size 0
        @media only screen and (max-width 360px)
          margin .36rem .2rem
        @media only screen and (max-width 320px)
          margin .36rem 0
          padding-left .1rem
        .food-score,.service-score
          vertical-align top
          margin-bottom .16rem
          .title
            font-size .24rem
            line-height .36rem
            color rgb(7, 17, 27)
            margin-right .24rem
            display inline-block
            vertical-align top
          .star-wapper
            display inline-block
            margin-right .24rem
          .score
            display inline-block
            font-size .24rem
            line-height .36rem
            color rgb(255, 153, 0)
            vertical-align top
        .delivery-time
          font-size .24rem
          line-height .36rem
          .title
            color rgb(7, 17, 27)
            margin-right .24rem
          .time
            color rgb(147, 153, 159)
  .rating-list
    .rating-item
      position relative
      display flex
      margin .36rem
      border-bottom .02rem solid rgba(7, 17, 27, 0.1)
      &:last-child
        border none
      .img-wapper
        flex 0 0 .56rem
        width .56rem
        margin-right .24rem
        .img
          border-radius 50%
      .content
        flex 1
        padding-bottom .36rem
        .name
          font-size .2rem
          color rgb(7, 17, 27)
          line-height .24rem
          margin-bottom .12rem
        .star
          margin-bottom .06rem
          line-height .24rem
          .star-wapper
            display inline-block
            margin-right .12rem
            vertical-align top
          .time
            vertical-align top
            font-size .2rem
            font-weight 200
            color rgb(147, 153, 159)
        .text
          font-size .24rem
          color rgb(7, 17, 27)
          line-height .36rem
          margin-bottom .16rem
        .up-down
          .icon-thumb_up,.icon-thumb_down
            font-size .24rem
            line-height .32rem
            margin-right .16rem
          .icon-thumb_up
            color rgb(0, 160, 220)
          .icon-thumb_down
            color rgb(183, 187, 191)
          .rem
            display inline-block
            padding .04rem .12rem
            margin-right .16rem
            margin-bottom .06rem
            font-size .18rem
            color rgb(147, 153, 159)
            line-height .32rem
            border .02rem solid rgba(7, 17, 27, 0.1)
            border-radius .04rem
            background-color #fff
        .rate-time
          position absolute
          top 0
          right 0
          font-size .2rem
          font-weight 200
          color rgb(147, 153, 159)
</style>
